<template>
  <div class="wrapper">
    <div class="goods">
      <h2>新品推荐</h2>
      <!-- 商品列表 -->
      <div class="goods__list">
        <goods-list
          :list="goods"
          :page.sync="pageOptions.page"
          :size="pageOptions.size"
          :total="pageOptions.total"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  watch,
} from '@vue/composition-api';
import { getProduct, getCategory } from '../../api/user';
import GoodsList from '../../components/GoodsList.vue';

export default defineComponent({
  components: { GoodsList },
  setup() {
    const goods = ref([]);
    const pageOptions = reactive({
      page: 1,
      size: 50,
      total: 0,
    });
    const getGoods = async () => {
      const { code, data } = await getProduct(
        pageOptions.page,
        pageOptions.size,
        {isNew: 1}
      );
      if (code === 100) {
        goods.value = data.products;
        pageOptions.total = data.total;
      }
    };

    onMounted(() => {
      getGoods();
    });

    const setFilter = ({ category }) => {
      typeof category !== 'undefined' && (searchParams.categoryId = category);
    };

    watch(pageOptions.page, () => {
      getGoods();
    });

    return {
      setFilter,
      pageOptions,
      goods,
    };
  },
});
</script>

<style lang="less" scoped>
.wrapper {
  padding: 40px 0;
  background: #f9f9f9;
  .goods {
    width: 1200px;
    margin: 0 auto;

    &__list {
      padding: 20px 0 40px;
    }
  }
}
</style>
